import React from 'react'
import { connect } from 'dva'
import { Row,Col,Table,Card ,Pagination} from 'antd'



/**
 * [OpenInterest 未平仓详情列表]
 */


class OpenInterest extends React.Component {
  state={
    data:this.props.openPositionsList
  }
  componentDidMount() {
    this.fetchData(this.props)
  }
  componentWillReceiveProps(nextProps) {
    console.log('TradeRecords>nextProps',nextProps)
    if((nextProps.begindate!==this.props.begindate)||
      (nextProps.enddate!==this.props.enddate)||
      (nextProps.stock !== this.props.stock)||
      (nextProps.trader !== this.props.trader)){
      this.fetchData(nextProps)
    }
    if(nextProps.openPositionsList!==this.props.openPositionsList){
      this.setState({
        data:nextProps.openPositionsList
      })
    }
  }
  fetchData=(props)=>{
    props.dispatch({
      type: `dailyReplay/getOpenPositionsList`,
      payload:props
    })
  }
  onShowSizeChange=(current, pageSize)=> {
    console.log(current, pageSize);
    this.fetchData({
      ...this.props,
      currentpage:1,
      pagesize:pageSize
    })
  }
  onCurrentChange=(current,pageSize)=>{
    this.fetchData({
      ...this.props,
      currentpage:current,
      pagesize:pageSize
    })
  }
  render() {
    const { data } = this.state;
    const fieldList = data.field||[];
    const dataPage = data.page || {};
    const dataSource = data.list||[];
    const columns = [];
    const pageSizeOptions = ['15', '25', '35', '45'];
    fieldList.filter(item => item.id === 'trader').map(item => {
      columns.push({
        title: item.name,
        dataIndex: item.id,
        key: item.id,
        sorter: (a, b) => a[item.id] - b[item.id],
      })
    })
    fieldList.filter(item => item.id !== 'trader').map((item, index) => {
      columns.push({
        title: item.name,
        dataIndex: item.id,
        key: item.id,
        sorter: (a, b) => a[item.id] - b[item.id],
      })
    })
    columns.map(item=>{
      if(item.dataIndex == "tradeType"){
        item.sorter=(a,b) => a.length - b.length
      }
    })
    console.log('getTradeRecords>',this.props)
    return (
      <Card>
        <Row>
          <Table
            columns={columns}
            dataSource={dataSource}
            rowKey={record => `${record.groupId}-${record.timestamp}-${record.orderId}-${record.symbol}-${record.price}
            -${record.quantity}-${record.fee}-${record.currentPrice}-${record.floatPnl}`}
            pagination={false}
          />
          {
            dataPage?<Pagination 
              showSizeChanger 
              onShowSizeChange={this.onShowSizeChange}
              onChange={this.onCurrentChange}
              current={dataPage.currentpage} 
              total={dataPage.totalnum}
              pageSize={dataPage.pagesize}
              pageSizeOptions={pageSizeOptions}
              showTotal={total => ` 共 ${total}条数据`}
            />:null
          }
        </Row>
      </Card>
    )
  }
}

OpenInterest.defaultProps={
  begindate: null,
  enddate: null,
  openPositionsList:{}
}

export default connect()(OpenInterest)

